<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>抽奖</title>
	<style type="text/css">
		*{
			padding:0px;
			margin: 0px;
		}

		.box{
			width: 300px;
			height: 300px;
			margin: 100px auto;
		}
		
		.list{
			width: 98px;
			height: 98px;
			border: 1px solid red;
			background: #272822 url() 0 0 no-repeat;
			list-style: none;
			float: left;
			line-height: 98px;
			font-size: 50px;
			text-align: center;
			color: #fff;
		}
		.button{
			width: 98px;
			height: 98px;
			border: 1px solid red;
			background: #fff url() 0 0 no-repeat;
			list-style: none;
			float: left;
			line-height: 98px;
			font-size: 25px;
			text-align: center;
			color: #000;
			cursor: pointer;
		}


	</style>
	<script type="text/javascript">
		window.onload = function  () {
			var button = document.getElementById('button');

			var list = document.getElementsByClassName('list');
			var arr = [0,1,2,4,7,6,5,3];
			var num = 0;
			function run () {
				for (var i = 0; i < list.length; i++) {
					list[i].style.backgroundColor='#000';
				};

				list[arr[num]].style.backgroundColor='red';

				num++;

				if(num==list.length){
					num=0;
				}


			}

			button.onclick = function  () {
				if(button.innerHTML=='开始'){
					button.innerHTML = "停止";
					time = setInterval(run, 50);
				}else{
					button.innerHTML = "开始";
					clearInterval(time);
					// alert("恭喜你，中奖了"+num+arr[num]);
					data = Math.ceil(Math.random()*8);
					for (var i = 0; i < list.length; i++) {
						list[i].style.backgroundColor='#000';
					};
					list[data-1].style.backgroundColor='red';

					alert(data+"恭喜你，中奖了");
					
				}
				
			}

		}
	</script>
</head>
<body>
	<ul class="box">
		<li class="list">1</li>
		<li class="list">2</li>
		<li class="list">3</li>
		<li class="list">4</li>
		<li class="button" id="button">开始</li>
		<li class="list">5</li>
		<li class="list">6</li>
		<li class="list">7</li>
		<li class="list">8</li>
	</ul>
</body>
</html>